<template>
  <div>
    <el-dialog
      title="编辑用户信息"
      :visible.sync="dialogFormVisibleUserModify"
      :close-on-click-modal="false"
      @close="handleCloseUserModifyClose"
    >
      <el-form
        ref="ruleFormUserModify"
        :model="ruleFormUserModify"
        :rules="rulesUserModify"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="sysUserName">
          <el-input v-model="ruleFormUserModify.sysUserName" />
        </el-form-item>
        <el-form-item label="状态" prop="disabledFlag">
          <el-radio-group v-model="ruleFormUserModify.disabledFlag">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleFormUserModify.remark" type="textarea" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="editLoading.loading" @click="submitFormUserModify('ruleFormUserModify')">提交</el-button>
          <el-button @click="resetFormUserModify('ruleFormUserModify')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { userModify } from '@/api/momo/SysEnterprise'
import { success } from '@/utils/tip'

export default {
  name: 'UserModify',
  props: {
    userModifyToChild: {}
  },
  data() {
    return {
      dialogFormVisibleUserModify: false,
      ruleFormUserModify: {
        enterpriseUuid: '',
        sysUserName: '',
        remark: '',
        disabledFlag: 0
      },
      editLoading: {
        loading: false,
        uuid: ''
      },
      rulesUserModify: {
        sysUserName: [
          { required: true, message: '用户名必填', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    userModifyToChild: {
      deep: true,
      immediate: false,
      handler() {
        this.dialogFormVisibleUserModify = true
        const data = JSON.parse(JSON.stringify(this.userModifyToChild))
        this.ruleFormUserModify = data.res
        this.ruleFormUserModify.enterpriseUuid = data.enterpriseUuid
      }
    }
  },
  methods: {
    submitFormUserModify(formName) {
      this.$refs[formName].validate((valid) => {
        this.editLoading.loading = true
        if (valid) {
          userModify(this.ruleFormUserModify).then(res => {
            res = res.data
            this.dialogFormVisibleUserModify = false
            success(res)
            this.editLoading.loading = false
            this.ruleFormUserModify.remark = ''
            this.resetFormUserModify('ruleFormUserModify')
            this.$emit('userModifyToFather', {})
          }).catch(errored => {
            this.editLoading.loading = false
          })
        } else {
          this.editLoading.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormUserModify(formName) {
      this.ruleFormUserModify.remark = ''
      this.$refs[formName].resetFields()
    },
    handleCloseUserModify() {
      // this.dialogFormVisibleUserModify = false
      // this.$emit('userModifyToFather', '我是孩子')
    },
    handleCloseUserModifyClose() {
      // this.dialogFormVisibleUserModify = false
      // this.$emit('userModifyToFather', '我是孩子')
    }
  }
}
</script>

<style scoped>

</style>
